avatar {
  border-radius: $circular_radius;
  font-weight: bold;

  // The list of colors to generate avatars.
  // Each avatar color is represented by a font color, a gradient start color and a gradient stop color.
  // There are 8 different colors for avtars in the list if you change the number of them you
  // need to update the NUMBER_OF_COLORS in src/adw-avatar.c.
  // The 2D list has this form: ((font-color, gradient-top-color, gradient-bottom-color)).
  $avatarcolorlist: (
   (#cfe1f5, #83b6ec, #337fdc), // blue
   (#caeaf2, #7ad9f1, #0f9ac8), // cyan
   (#cef8d8, #8de6b1, #29ae74), // green
   (#e6f9d7, #b5e98a, #6ab85b), // lime
   (#f9f4e1, #f8e359, #d29d09), // yellow
   (#ffead1, #ffcb62, #d68400), // gold
   (#ffe5c5, #ffa95a, #ed5b00), // orange
   (#f8d2ce, #f78773, #e62d42), // raspberry
   (#fac7de, #e973ab, #e33b6a), // magenta
   (#e7c2e8, #cb78d4, #9945b5), // purple
   (#d5d2f5, #9e91e8, #7a59ca), // violet
   (#f2eade, #e3cf9c, #b08952), // beige
   (#e5d6ca, #be916d, #785336), // brown
   (#d8d7d3, #c0bfbc, #6e6d71), // gray
  );

  @for $i from 1 through length($avatarcolorlist) {
    &.color#{$i} {
      $avatarcolor: nth($avatarcolorlist, $i);
      background-image: linear-gradient(nth($avatarcolor, 2), nth($avatarcolor, 3));
      color: nth($avatarcolor, 1);
    }
  }

  &.contrasted { color: white; }

  &.image { background: none; }
}

//
// Toasts
//

toast {
  background-color: $base_color;
  margin: $base_padding * 2;
  margin-bottom: 24px;
  border-radius: $circular_radius;
  border-spacing: $base_padding;
  padding: $base_padding;
  box-shadow: $shadow_6, inset 0 1px $highlight_color;
  color: $secondary_fg_color;
  font-weight: normal;

  &:dir(ltr) { padding-left: $base_padding * 2; }
  &:dir(rtl) { padding-right: $base_padding * 2; }

  > widget {
    margin: 0 $base_padding;
  }
}

//
// AdwStatusPage
//

statuspage {
  > scrolledwindow > viewport > box {
    margin: $base_padding * 6 $base_padding * 2;
    border-spacing: 36px;

    > clamp > box {
      border-spacing: $base_padding * 2;

      > .icon {
        -gtk-icon-size: 128px;

        color: gtkalpha(currentColor, 0.45);

        &:disabled {
          opacity: 0.45;
        }

        &:not(:last-child) {
          margin-bottom: $base_padding * 4;
        }
      }
    }
  }

  &.compact > scrolledwindow > viewport > box {
    margin: $base_padding * 4 $base_padding * 2;
    border-spacing: $base_padding * 4;

    > clamp > box {
      > .icon {
        -gtk-icon-size: 96px;

        &:not(:last-child) {
          margin-bottom: $base_padding * 2;
        }
      }

      > .title {
        font-size: 18pt;
      }
    }
  }
}

// Cards
.card {
  @at-root %card, & {
    border-radius: $buttons_radius;
    box-shadow: none;
    border: 1px solid $border_color;
    background-clip: padding-box;
    background-color: $base_color;
    color: $secondary_fg_color;

    // .osd &, &.osd {
    // }
  }
}

// preferences
preferencespage > scrolledwindow > viewport > clamp > box {
  margin: $base_padding * 4 $base_padding * 2;
  border-spacing: $base_padding * 4;
}

preferencesgroup > box {
  &, .labels {
    border-spacing: $base_padding;
  }

  > box.header:not(.single-line) {
    margin-bottom: $base_padding;
  }

  > box.single-line {
    min-height: $medium_size;
  }

  button.background-preview-button.toggle {
    padding: 0;
    background: none;
    box-shadow: none;
    outline-color: transparent;
    outline-width: 3px;
    outline-offset: $base_padding / 2;
    outline-style: solid;

    &, > background-preview {
      border-radius: 6px;
    }

    &:hover {
      outline-color: $fill_color;
    }

    &:active {
      outline-color: $track_color;
    }

    &:checked {
      outline-color: $primary_color;
    }
  }
}

//
// viewswitcher
//

viewswitcher {
  margin: 0;

  &.wide {
    border-spacing: 0;
    border-radius: $circular_radius;
    background-color: rgba($titlebar_fg_color, 0.05);

    button.toggle {
      &:checked {
        indicatorbin.needs-attention > indicator {
          > label { color: $primary_color; }

          background-color: $inverse_fg_color;
        }
      }
    }
  }

  &.narrow button.toggle {
    border-radius: 0;
    margin: 0;
    border: none;
    background-color: transparent;
    box-shadow: none;

    &:hover {
      color: $titlebar_fg_color;
      box-shadow: inset 0 -2px transparent;
      background-color: rgba($titlebar_fg_color, 0.04);
    }

    &:active {
      color: $titlebar_fg_color;
      box-shadow: inset 0 -2px $primary_color;
      background-color: rgba($titlebar_fg_color, 0.1);
    }

    &:checked {
      border-radius: 0;
      color: $titlebar_fg_color;
      background-color: rgba($titlebar_fg_color, 0.06);
      box-shadow: inset 0 -2px $primary_color;
      background-image: none;
    }

    &:checked:backdrop, &:active:backdrop {
      color: $titlebar_secondary_fg_color;
      box-shadow: inset 0 -2px $titlebar_disabled_fg_color;
    }
  }

  button.toggle {
    font-weight: bold;
    padding: 0;
    min-height: 0;
    margin: 0;

    > stack > box {
      &.narrow {
        font-size: 0.75rem;
        padding-top: $base_padding + 1px;
        padding-bottom: $base_padding - 1px;
        border-spacing: $base_padding - 2px;

        > stack > label {
          padding-left: $base_padding + 2px;
          padding-right: $base_padding + 2px;
        }
      }

      &.wide {
        padding: 0 $base_padding * 2;
        border-spacing: $base_padding;
      }
    }
  }
}

// AdwViewSwitcherBar
viewswitcherbar {
  border-spacing: 3px;
  min-height: 34px;

  &.narrow {
    margin-top: -3px;
    margin-bottom: -3px;
    min-height: 6px;
  }

  actionbar > revealer > box {
    padding: $container_padding 0 0;
  
    viewswitcher.narrow button.toggle:not(.suggested-action):not(.destructive-action) {
      transition: none;
  
      &:hover {
        color: $fg_color;
        background-color: rgba($fg_color, 0.04);
        box-shadow: inset 0 2px transparent;
      }
  
      &:active {
        color: $fg_color;
        background-color: rgba($fg_color, 0.1);
        box-shadow: inset 0 2px $primary_color;
      }
  
      &:checked {
        border-radius: 0;
        color: $fg_color;
  
        &, &:hover {
          background-color: rgba($fg_color, 0.06);
          box-shadow: inset 0 2px $primary_color;
          background-image: none;
        }
      }
  
      &:checked:backdrop, &:active:backdrop {
        color: $secondary_fg_color;
        box-shadow: inset 0 2px $disabled_fg_color;
      }
    }
  }
}

%viewswitcherbar-shrunk {
  margin: $container_padding / 2 0;

  actionbar > revealer > box {
    // Not 0px because view switcher has negative margin
    padding-top: $container_padding;
  }
}

// AdwViewSwitcherTitle
viewswitchertitle {
  margin-top: 0;
  margin-bottom: 0;

  viewswitcher {
    margin-left: $base_padding * 2;
    margin-right: $base_padding * 2;

    &.narrow {
      margin-top: 0;
      margin-bottom: 0;

      button.toggle {
        > stack > box {
          &.narrow {
            padding-top: 0;
            padding-bottom: 0;
            border-spacing: 0;
          }
        }
      }
    }

    &.wide {
      margin-top: $base_padding;
      margin-bottom: $base_padding;
    }
  }

  windowtitle {
    margin-top: 0;
    margin-bottom: 0;
  }
}

// AdwIndicatorBin
indicatorbin {
  > indicator, > mask {
    min-width: $base_padding;
    min-height: $base_padding;
    border-radius: $circular_radius;
  }

  > indicator {
    margin: 1px;
    padding: 0;
    background: gtkalpha(currentColor, .4);

    > label {
      font-size: 0.6rem;
      font-weight: bold;
      padding: 2px 5px;
      color: white;
    }
  }

  > mask {
    padding: 1px;
    background: black;
  }

  &.needs-attention > indicator {
    background-color: $primary_color;

    > label { color: $inverse_fg_color; }
  }
}

//
// tab-view
//

tabbar {
  .box {
    background-color: $titlebar_bg_color;
    color: $titlebar_fg_color;
    box-shadow: inset 0 -1px $border_color;
    padding: 1px;
    padding-top: 0;

    &:backdrop {
      background-color: $alt_titlebar_bg_color;
      transition: background-color 200ms ease-out;

      > scrolledwindow,
      > .start-action,
      > .end-action {
        filter: opacity(0.5);
        transition: filter 200ms ease-out;
      }
    }
  }

  tabbox {
    padding: 0;
    min-height: $medium_size;
    background-color: transparent;

    > tabboxchild {
      border-radius: 0;
      background-color: transparent;

      > tab {
        border-radius: 0;
        background-color: transparent;
        transition: background-color 150ms ease-in-out;

        &:selected {
          background-color: $base_color;
          box-shadow: inset 0 -2px $primary_color;

          &:hover {
            background-color: mix($fg_color, $base_color, 3%);
            box-shadow: inset 0 -2px $primary_color;
          }

          &:active {
            background-color: mix($fg_color, $base_color, 8%);
            box-shadow: inset 0 -2px $primary_color;
          }
        }

        &:hover {
          background-color: rgba($fg_color, 0.04);
          box-shadow: inset 0 -2px $track_color;
        }

        &:active {
          background-color: rgba($fg_color, 0.1);
          box-shadow: inset 0 -2px $primary_color;
        }
      }
    }

    > separator {
      margin-top: 9px;
      margin-bottom: 9px;
      transition: opacity 150ms ease-in-out;

      &.hidden {
        opacity: 0;
      }
    }

    > revealer > indicator {
      min-width: 2px;
      border-radius: 2px;
      margin: 3px 6px;
      background: $primary_color;
    }
  }

  tabbox.single-tab tab {
    &, &:hover, &:active {
      background: none;
    }
  }

  .start-action,
  .end-action {
    padding: 6px 5px;
  }

  .start-action:dir(ltr),
  .end-action:dir(rtl) {
    padding-right: 0;
  }

  .start-action:dir(rtl),
  .end-action:dir(ltr) {
    padding-left: 0;
  }

  &.inline {
    @extend %tabbar-inline;
  }
}

%tabbar-inline .box {
  background-color: transparent;
  color: inherit;
  box-shadow: none;
  padding-bottom: 0;

  &:backdrop {
    background-color: transparent;
    transition: none;

    > scrolledwindow,
    > .start-action,
    > .end-action {
      filter: none;
      transition: none;
    }
  }
}

%tabbar-shrunk {
  // margin-bottom: -$container_padding / 2;

  tabbox,
  .start-action,
  .end-action {
    padding: 0;
  }
}

dnd tab {
  background-color: $titlebar_bg_color;
  background-image: image(rgba($fg_color, 0.12));
  color: $titlebar_fg_color;

  box-shadow: 0 0 0 1px transparentize(black, 0.97),
              0 1px 3px 1px transparentize(black, .93),
              0 2px 6px 2px transparentize(black, .97);

  margin: 25px;
}

tabbar,
dnd {
  tab {
    min-height: 26px;
    padding: 4px;
    border-radius: $buttons_radius;

    button.image-button {
      padding: 0;
      margin: 0;
      min-width: 24px;
      min-height: 24px;
      border-radius: 99px;
    }

    indicator {
      min-height: 2px;
      border-radius: 2px;
      background: gtkalpha($primary_color, 0.5);
      transform: translateY(4px);
    }
  }
}

tabthumbnail {
  border-radius: $buttons_radius + 4px;

  > box {
    margin: 6px;
  }

  &:drop(active) {
    box-shadow: inset 0 0 0 2px gtkalpha($warning_color, .4);
    background-color: gtkalpha($warning_color, .1);
  }

  transition: box-shadow 200ms ease-out, background-color ease-out;

  .needs-attention {
    &:dir(ltr) { transform: translate(8px, -8px); }
    &:dir(rtl) { transform: translate(-8px, -8px); }

    > widget {
      background: $primary_color;
      min-width: 12px;
      min-height: 12px;
      border-radius: 8px;
      margin: 3px;
      box-shadow: 0 1px 2px gtkalpha($primary_color, .4);
    }
  }

  .card {
    picture {
      outline: none;
      border-radius: $buttons_radius;
    }

    background: none;
    color: inherit;
  }

  &.pinned .card {
    background-color: rgba($primary_color, 0.12);
    color: $fg_color;
  }

  .icon-title-box {
    border-spacing: 6px;
  }

  .tab-unpin-icon {
    margin: 6px;
    min-width: 24px;
    min-height: 24px;
  }

  button.circular {
    margin: 6px;
    background-color: gtkalpha($primary_color, 0.15);
    min-width: 24px;
    min-height: 24px;

    &:hover {
      background-color: gtkalpha($primary_color, 0.2);
    }

    &:active {
      background-color: gtkalpha($primary_color, 0.25);
    }
  }
}

taboverview > .overview  .new-tab-button {
  margin: 18px;
}

tabview:drop(active),
tabbox:drop(active),
tabgrid:drop(active) {
  box-shadow: none;
}

// Transition shadows
flap,
leaflet,
navigation-view,
overlay-split-view {
  @include transition-shadows(rgba(black, 0.15));
}

toolbarview.undershoot-top scrolledwindow {
  @include undershoot(top);
}

toolbarview.undershoot-bottom scrolledwindow {
  @include undershoot(bottom);
}

// Sidebar
.unfolded stacksidebar.sidebar { border: none; }

.sidebar-pane {
  background-color: $alt_base_color;
  color: $fg_color;

  &:backdrop {
    background-color: $bg_color;
    transition: background-color $longer_duration $deceleration_curve;
  }

  .toolbar,
  .sidebar,
  .navigation-sidebar,
  headerbar,
  searchbar > revealer > box {
    background-color: transparent;
    box-shadow: none;
    border: none;
  }

  toolbarview.undershoot-top scrolledwindow {
    @include undershoot(top);
  }

  toolbarview.undershoot-bottom scrolledwindow {
    @include undershoot(bottom);
  }

  scrolledwindow {
    &.undershoot-top {
      @include undershoot(top);
    }

    &.undershoot-bottom {
      @include undershoot(bottom)
    }

    &.undershoot-start {
      &:dir(ltr) { @include undershoot(left); }
      &:dir(rtl) { @include undershoot(right); }
    }

    &.undershoot-end {
      &:dir(ltr) { @include undershoot(right); }
      &:dir(rtl) { @include undershoot(left); }
    }
  }

  flap,
  leaflet,
  navigation-view,
  overlay-split-view {
    @include transition-shadows(rgba(black, 0.15));
  }

  banner > revealer > widget {
    background-color: gtkmix($primary_color, $alt_base_color, 30%);
    color: $fg_color;

    &:backdrop {
      background-color: gtkmix($primary_color, $alt_base_color, 30%);
    }
  }

  &:dir(ltr), &.end:dir(rtl) {
    &, banner > revealer > widget {
      box-shadow: none;
      border-right: 1px solid $border_color;
    }
  }

  &:dir(rtl), &.end:dir(ltr) {
    &, banner > revealer > widget {
      box-shadow: none;
      border-left: 1px solid $border_color;
    }
  }
}

/* Middle pane in three-pane setups */
.content-pane .sidebar-pane,
.sidebar-pane .content-pane {
  background-color: $base_color;
  color: $fg_color;

  &:backdrop {
    background-color: $bg_color;
    transition: background-color $longer_duration $deceleration_curve;
  }

  toolbarview.undershoot-top scrolledwindow {
    @include undershoot(top);
  }

  toolbarview.undershoot-bottom scrolledwindow {
    @include undershoot(bottom);
  }

  scrolledwindow {
    &.undershoot-top {
      @include undershoot(top);
    }

    &.undershoot-bottom {
      @include undershoot(bottom)
    }

    &.undershoot-start {
      &:dir(ltr) { @include undershoot(left); }
      &:dir(rtl) { @include undershoot(right); }
    }

    &.undershoot-end {
      &:dir(ltr) { @include undershoot(right); }
      &:dir(rtl) { @include undershoot(left); }
    }
  }

  flap,
  leaflet,
  navigation-view,
  overlay-split-view {
    @include transition-shadows($border_color);
  }

  banner > revealer > widget {
    background-color: gtkmix($primary_color, $base_color, 30%);
    color: $fg_color;

    &:backdrop {
      background-color: gtkmix($primary_color, $base_color, 30%);
    }
  }

  &:dir(ltr), &.end:dir(rtl) {
    &, banner > revealer > widget {
      box-shadow: none;
      border-right: 1px solid $border_color;
    }
  }

  &:dir(rtl), &.end:dir(ltr) {
    &, banner > revealer > widget {
      box-shadow: none;
      border-left: 1px solid $border_color;
    }
  }
}

.sidebar-pane .sidebar-pane {
  background-color: transparent;
  color: inherit;
}

// Gnome >= 45.0
.top-bar {
  padding: 0;
  // background-color: $titlebar_bg_color;
  box-shadow: none;

  .about &,
  .sidebar-pane &,
  .content-pane & {
    &, &:backdrop {
      background-color: transparent;
    }
  }

  headerbar,
  box > headerbar:only-child {
    &, &:backdrop {
      background-color: transparent;
      box-shadow: inset 0 1px $titlebar_highlight_color;
      border: none;
    }
  }

  .collapse-spacing {
    padding: 0;
  }
}

.bottom-bar {
  .toolbar { background-color: transparent; }
}

// ThemeSelector
themeselector, // Gnome text editor
panelthemeselector { // Gnome builder
  margin: $container_padding * 1.5;

  checkbutton {
    min-height: 44px;
    min-width: 44px;
    padding: 1px;
    background-clip: content-box;
    border-radius: $circular_radius;
    box-shadow: inset 0 0 0 1px $border_color;

    &.follow:checked,
    &.light:checked,
    &.dark:checked {
      box-shadow: inset 0 0 0 2px $primary_color;
    }

    &.follow {
      background-image: linear-gradient(to bottom right, #ffffff 50%, #202020 50%);
    }

    &.light {
      background-color: #ffffff;
    }

    &.dark {
      background-color: #202020;
    }

    &.theme-selector radio {
      -gtk-icon-source: none;
      border: none;
      background: none;
      box-shadow: none;
      min-height: 20px;
      min-width: 20px;
      padding: 0;
      margin: 0;

      &:hover, &:active, &:checked {
        background-color: transparent;
      }

      &:checked {
        -gtk-icon-size: 20px;
        -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/scalable/check-symbolic.svg")), -gtk-recolor(url("assets/scalable/check-symbolic@2.svg")));
        color: $inverse_fg_color;
        background-color: $primary_color;

        &, &:hover, &:active {
          box-shadow: 0 2px 3px -1px rgba(black, 0.08), 0 1px 2px 0 rgba(black, 0.1);
        }
      }
    }
  }
}

themeswitcher { // Gnome console
  padding: $container_padding;

  .check {
    min-height: 20px;
    min-width: 20px;
    background: none;
    padding: 0;
    margin: 0;
    border-radius: $circular_radius;
    color: $inverse_fg_color;
    background-color: $primary_color;

    &, &:hover, &:active {
      box-shadow: 0 2px 3px -1px rgba(black, 0.08), 0 1px 2px 0 rgba(black, 0.1);
    }
  }

  checkbutton {
    padding: 0;
    min-height: 44px;
    min-width: 44px;
    padding: 1px;
    background-clip: content-box;
    border-radius: $circular_radius;
    box-shadow: inset 0 0 0 1px $border_color;

    &:checked {
      box-shadow: inset 0 0 0 2px $primary_color;
    }

    radio {
      &, &:hover, &:active, &:checked, &:checked:hover, &:checked:active {
        background-color: transparent;
        border: none;
        background: none;
        box-shadow: none;
        color: transparent;
        -gtk-icon-source: none;
        -gtk-icon-size: 0;
      }
    }

    &.system {
      background: linear-gradient(-45deg, #1e1e1e 50%, white 50%);
    }

    &.light {
      color: gtkalpha(black, .8);
      background-color: white;
    }

    &.dark {
      color: white;
      background-color: #1e1e1e;
    }
  }
}
